<template>
  <div class="app-main-box">
    <!-- 搜索区域 -->
    <el-form class="global-search-form" v-show="showSearch" :model="queryParams" ref="queryRef" :inline="true">
      <!-- <el-form-item class="from-item" label="箱号：" prop="plateNo">
        <el-input v-noSpace v-model="queryParams.plateNo" placeholder="请输入车牌号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item class="from-item" label="磅单号：" prop="weightBillNo" style="width: 260px;">
        <el-input v-noSpace v-model="queryParams.weightBillNo" placeholder="请输入磅单号" clearable
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item class="from-item" label="运单号：" prop="waybillNo">
        <el-input v-noSpace v-model="queryParams.waybillNo" placeholder="请输入运单号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item class="from-item" label="车号：" prop="trainNo">
        <el-input v-noSpace v-model="queryParams.trainNo" placeholder="请输入车号" clearable @keyup.enter="handleQuery" />
      </el-form-item> -->
      <el-form-item class="from-item" label="对账时间：" style="min-width: max-content">
        <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="-"
          start-placeholder="开始日期" end-placeholder="结束日期" placement="right" :teleported="false"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="global-search-button" type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button class="global-search-button" icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格数据 -->
    <div class="global-table-container">
      <el-table class="global-border-radius-table" algin="center" v-loading="loading" :data="transportList">
        <el-table-column label="序号" type="index" prop="" min-width="70" :show-overflow-tooltip="true"
          :index="indexMethod" />
        <el-table-column label="对账单号" prop="id" min-width="200" :show-overflow-tooltip="true" />
        <el-table-column label="标题" prop="title" min-width="150" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="货物" prop="cargo" min-width="150" :show-overflow-tooltip="true" /> -->
        <el-table-column label="总数" prop="amount" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="应收总金额（¥）" prop="amountReceivable" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="对账人" prop="operatorName" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="对账时间" prop="createTime" min-width="200" :show-overflow-tooltip="true" />
        <el-table-column fixed="right" label="操作" class-name="small-padding" min-width="200">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="viewInfo(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageIndex"
      v-model:limit="queryParams.pageSize" :pageSizes="[15, 20, 30, 50]" @pagination="getList" />
  </div>
</template>

<script setup name="transportOrderList">
import { ElMessage } from 'element-plus'
import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed, getCurrentInstance } from 'vue';
// import { listTransPortApi, transportInfoApi, getWeightbillInfoApi, checkHaulApi, updateHaulApi } from "@/api/transportOrderManagement/transportOrderList";
import { getReconciliationListApi } from "@/api/financeManagement/upstreamReconciliation/railwayReconciliationList";
import { getRouteSimpleListApi } from "@/api/common";
const router = useRouter();
const { proxy } = getCurrentInstance();
let loading = ref(true);
let showSearch = ref(true);
let total = ref(0);
let dateRange = ref([]);
let transportList = reactive([]) // 发端短驳
/** 列表查询参数 */
const data = reactive({
  queryParams: {
    pageIndex: 1,
    pageSize: 15
  }
});
const { queryParams } = toRefs(data);

/** 
* Methods
*/
/** 查询铁路发运对账单列表 */
function getList() {
  loading.value = true;
  // const { routeId, isChecked, ...rest } = queryParams.value
  // let params = rest
  // isChecked != 'all' ? params["isChecked"] = isChecked : null
  // routeId != 'all' ? params["routeId"] = routeId : null
  getReconciliationListApi(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    transportList = response.data.records;
    total.value = Number(response.data.total);
    loading.value = false;
  }).catch(err => {
    loading.value = false;
  })
}

/** 表格序号 */
function indexMethod(index) {
  index = index + 1
  if (queryParams.value.pageIndex > 1) {
    index = index + (queryParams.value.pageIndex - 1) * queryParams.value.pageSize
  }
  return index
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageIndex = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  queryParams.value.routeId = 'all'
  queryParams.value.isChecked = 'all'
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 查看铁路对账单详情 */
function viewInfo(row) {
  router.push({
    path: '/financeManagement/upstreamReconciliation/railwayReconciliationInfo',
    query: {
      id: row.id
    }
  })
}

getList();
</script>

<style lang='scss' scoped>
@import '../../../../assets/styles/variables.module.scss';

.app-main-box {
  background: #fff;
  border-radius: 12px;
  min-height: calc(100vh - 125px);
  width: calc(100% - 40px);

  .global-table-container {
    padding: 0px 24px;
  }

  /** 审核状态 */
  .is-check,
  .no-check {
    display: flex;
    align-items: center;
    justify-content: center;

    &>.icon {
      margin: 0 4px !important;
    }
  }

  .is-check {
    color: $--color-primary;
  }

  .no-check {
    color: #c9c9c9;
  }
}
</style>